<template>
  <!-- 消息页面 -->
  <div class="newsBox" style="padding-bottom:50px;">
    <!-- 标题 -->
    <x-header :left-options="{showBack: false,backText:''}" class="headerBox">消息</x-header>
    <!-- 搜索 -->
    <div class="searchBox">
      <div class="searchInner flex">
        <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
        <input
          type="text"
          class="searchInput"
          v-model="keyWord"
          placeholder="搜索内容"
          @keyup.enter="searchClick"
        />
      </div>
    </div>
    <!-- 消息列表 -->
    <group>
      <div>
      <cell
        v-for="(item,index) in newsList"
        :title="item.title"
        :inline-desc="item.time"
        :link="{ name: 'newsInfo', params: { newsId: item.id }}"
        value
        :key="index"
      ></cell>
      </div>
    </group>
    <TabBar></TabBar>
  </div>
</template>

<script>
import { XHeader, Cell, Group, } from 'vux'
import TabBar from "../components/tabBar";
export default {
  components: {
    XHeader,
    Cell,
    Group,
    TabBar
  },
  data() {
    return {
      keyWord: '',
      inputValue: '',
      newsList: [
        {
          id: '1',
          title: '消息名称消息名称',
          time: '2019-08-03',
        },
        {
          id: '2',
          title: '消息名称',
          time: '2019-07-03',
        },
        {
          id: '3',
          title: '消息名称消息名称消息名称',
          time: '2019-08-09',
        },
        {
          id: '4',
          title: '消息名称消消息名称',
          time: '2019-05-03',
        },
      ]
    }
  },
  methods: {
    searchClick() {
      this.$http.get('url', {
        params: {
          seach: this.keyWord
        }
      }).then(res => {
        // 成功相应
      }).catch(
        // 失败相应
      )
    },
  }



}
</script>

<style lang="less" scoped>
.newsBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
  }
  // 搜索
  .searchBox {
    padding: 20px;
    border-bottom: 20px solid #f8f9fa;
    .searchInner {
      background-color: #f5f5f5;
      border-radius: 30px;
      padding: 10px 20px;
      .searchIcon {
        fill: #6c6c6c;
        margin-right: 10px;
      }
      .searchInput {
        outline: none;
        border: none;
        background-color: #f5f5f5;
      }
    }
  }
}
</style>